<template>
    <view class="follow-box">
        <mescroll ref="mescrollRef" @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback" :up="upOption">
            <search></search>
            <view class="follow-box-conten">
                <view class="follow-row" v-for="(item, inx) in followList" :key="inx">
                    <view class="follow-row-img" @click="jumpInfo(item)">
                        <image :src="$util.img(item.image)" mode="aspectFill"></image>
                    </view>
                    <view class="follow-row-info">
                        <view class="row-info-title">{{ item.title }}</view>
                        <view class="row-info-dose" v-if="item.email">{{ item.email }}</view>
                        <view class="row-info-bottom df-cen-rl">
                            <avatar-name :nameWidth="180" :name="item.nickname" :avatar="item.headimg"></avatar-name>
                            <view class="info-bottom-icon df-ai-cen" style="flex: 1;justify-content: flex-end;">
                                <icon-box :iconArr="item.iconArr" @iconCall="iconFn"></icon-box>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <block v-if="showFenXiang==true">
                <fenxiang @closeFx="closeFx"></fenxiang>
            </block>
        </mescroll>
    </view>
</template>

<script>
import fenxiang from '@/livePages/components/fenxiang.vue'
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import IconBox from '@/livePages/components/icon-box.vue'
import search from '@/livePages/components/search.vue'
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			showFenXiang: false,
			followObj: {
				// token: '',
				page: 1,
				page_size: 10
			},
			followList: [],
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: false, // 不自动加载
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量
				},
				noMoreSize: 4, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				},
				textNoMore: '暂无更多数据...'
			}
		}
	},
	components: {
		fenxiang,
		search,
		IconBox
	},
	methods: {
		closeFx(e) {
			this.showFenXiang = e
		},
		shareBtn(e) {
			this.showFenXiang = !this.showFenXiang
		},
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调, 有3种处理方式:*/
		downCallback(e) {
			// #ifdef MP-WEIXIN
			if (!uni.getStorageSync('token')) {
				this.mescroll.endSuccess(0)
				return
			}
			// #endif
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调*/
		upCallback(page) {
			if (!uni.getStorageSync('token')) {
				this.mescroll.endSuccess(0)
				return
			}
			this.followObj.page = page.num
			if (page.num == 1) this.followList = []
			this.$request
				.getMemberFollowContentPageList(this.followObj)
				.then(res => {
					console.log(res)
					let newArr = []
					res.data.list.forEach(v => {
						let iconArr = [{
							type: 'forward',
							icon: 'home/give_icon.png',
							name: '点赞',
							val: v.love_num
						},
						{
							type: 'forward',
							icon: 'home/collection_icon.png',
							name: '收藏',
							val: v.collect_num
						},
						{
							type: 'forward',
							icon: 'home/comment_icon.png',
							name: '评论',
							val: v.comment_num
						},
						{
							type: 'share',
							icon: 'home/forward_icon.png',
							val: v.read_num
						}
						]
						v['iconArr'] = iconArr
						newArr.push(v)
					})
					this.followList = this.followList.concat(...newArr)
					this.mescroll.endSuccess(res.data.list.length)
				})
				.catch(() => {
					// 联网失败, 结束加载
					this.mescroll.endErr()
				})
		},
		jumpInfo(val) {
			console.log(val)
			let path = ''
			let query = {}
			switch (val.type) {
			case 'video':
				path = '/livePages/video/video'
				query['video_id'] = val.id
				break
			case 'live':
				path = '/livePages/live/replay'
				query['live_id'] = val.live_id
				break
			case 'graphic':
				path = '/livePages/details/details'
				query['content_id'] = val.id
				break
			default:
				return
			}
			console.log(val.type, val)
			this.$util.redirectTo(path, {
				...query
			})

		},
		iconFn(v) {
			// this.$Utils.tip('敬请期待(#^.^#)');
		}
	},
	onHide() {
		this.showFenXiang = false
	},
	mounted() { }
}
</script>

<style lang="scss">
.follow-box {
    height: 100%;
    padding: 0 24rpx;

    .toolbar-share {
        padding: 0;
        line-height: 1;
        background-color: transparent;

        .toolbar-icon {
            width: 50rpx;
            height: 50rpx;
        }
    }

    .follow-box-conten {
        .follow-row {
            margin-top: 20rpx;
            border-radius: 20rpx;
            background-color: #ffffff;
        }

        .follow-row-img {
            image {
                width: 100%;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
        }

        .follow-row-info {
            padding: 30rpx;
        }

        .row-info-title {
            margin-bottom: 30rpx;
            font-size: 38rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #222222;
        }

        .row-info-dose {
            margin-bottom: 30rpx;
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
        }
    }
}
</style>
